<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>二刺螈小破站</title>
  
  <link rel="alternate" href="/atom.xml" title="" type="application/atom+xml">
  
  
  <link rel="shortcut icon" href="/images/favicon.png"> 
  
<link rel="stylesheet" href="//at.alicdn.com/t/font_1317659_91ay27oeya8.css">

  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

  
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">

  
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

  
<link rel="stylesheet" href="/css/loader.css">

  
<link rel="stylesheet" href="/css/style.css">

  
<link rel="stylesheet" href="/css/myCss.css">

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
  <div id="container" class="container-fluid">
    <div id="wrap">
      <!--//头部展示-->
<header>
  <div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
    <div class="load_title">正在加载二刺螈站点<br><span>V2.1</span></div>
  </div>
  <!--页面背景图-->
  <div class="theme-bg"></div>
  <!--导航栏-->
  <div class="hidden-bar">
    <nav class="navbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="logo">
            <a class="navbar-brand" href="#"><img src="/images/favicon.png"></a>
          </div>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="/" title="首页" class="iconfont iconhome">首页</a></li>
            <li><a href="/archives" title="归档" class="iconfont iconbook">归档</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right hidden-xs">
            <li><a id="times" href="#"></a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <!--//标题-->
  <div class="top-banner">
    <!--//超大屏下显示-->
    <div class="hidden-xs hidden-sm  hidden-md">
      <img src="/images/2233-bask.jpg" style="width: 100%;">
      <div class="ban-title">
        <a class="portrait" href="/">
          <img src="/images/2233&cat.jpg" class="wow slideInDown">
        </a>
        <div class="wow fadeInUp">
          <h1>er 刺螈</h1>
          <p>Welcome to my personal site</p>
        </div>
        <a href="https://github.com/SakuraXIII/SakuraXIII.github.io" title="Github Pages"
          class="iconfont icongithub"></a>
        <a href="https://www.zhihu.com/people/an-ye-yong-heng-45/activities" title="玩知乎嘛"
          class="iconfont iconzhihu1"></a>
        <div class="hitokoto-text  wow flipInX">
          <p class="hitokoto"></p><strong></strong>
        </div>
      </div>
    </div>
    <!--//中屏-->
    <div class="hidden-lg hidden-xs md img">
      <div class="ban-title mdtitle">
        <h1>er刺螈</h1>
        <p>Welcome to my personal site</p>
        <a href="https://github.com/SakuraXIII/SakuraXIII.github.io" target="_blank" rel="noopener" class="iconfont icongithub"></a>
        <a href="https://www.zhihu.com/people/an-ye-yong-heng-45/activities" target="_blank" rel="noopener" class="iconfont iconzhihu1"></a>
        <div class="hitokoto-text">
          <p class="hitokoto"></p><strong></strong>
        </div>
      </div>
    </div>
    <!--手机上只显示图片，不显示文字-->
    <div class="hidden-lg hidden-md hidden-sm other img">
      <div class="ban-title othertitle">
        <h1>er刺螈</h1>
        <p>Welcome to my personal site</p>
      </div>

    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
          <article
  id="post-关于一段ES6代码的探讨"
  class="wow bounceInLeft article article-type-post"
  itemscope
  itemprop="blogPost"
>
  <div class="article-meta">
    <a href="/2020-03-01/%E5%85%B3%E4%BA%8E%E4%B8%80%E6%AE%B5ES6%E4%BB%A3%E7%A0%81%E7%9A%84%E6%8E%A2%E8%AE%A8/" class="article-date">
  <time datetime="2020-03-01T05:19:00.000Z" itemprop="datePublished">2020-03-01</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a>
  </div>

  </div>
  <div class="article-inner">
     
    <header class="article-header">
      
  
    <h1 class="article-title" itemprop="name">
      关于一段ES6代码的探讨
    </h1>
  
 
      <div class="subtitle">
        <p>字数：<span>你猜~(￣▽￣)~*</span>字</p>
      </div>
      <script>
        $(function() {
          var total = document.querySelector(".article-entry").innerText.length;
          document.querySelector(".subtitle p span").innerText = total;
        });
      </script>
      
    </header>
    
    <div class="article-entry" itemprop="articleBody">
       <h3 id="说在前面的话"><a href="#说在前面的话" class="headerlink" title="说在前面的话"></a>说在前面的话</h3><p>疫情不出门，在家也无聊，打开浏览器翻看各个收藏夹，想找点好康的，突然发现了很久以前收藏的 <a href="https://www.30secondsofcode.org/" target="_blank" rel="noopener">30s一个代码片段</a>，选择了JS语言，然后随机给我了一个代码片段<a href="https://www.30secondsofcode.org/js/s/pipe-async-functions/" target="_blank" rel="noopener">https://www.30secondsofcode.org/js/s/pipe-async-functions/</a>，仔细一看，顿时惊到了，一行代码就写完了。。完全看不懂。。于是来了兴趣，便研究了起来。</p>
<a id="more"></a>

<p><img src="/images/post/%E5%85%B3%E4%BA%8E%E4%B8%80%E6%AE%B5ES6%E4%BB%A3%E7%A0%81%E7%9A%84%E6%8E%A2%E8%AE%A8/57.jpg" alt></p>
<p>这里展出这段代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> pipeAsyncFunctions =</span><br><span class="line">(...fns) =&gt; <span class="function"><span class="params">arg</span> =&gt;</span> fns.reduce(<span class="function">(<span class="params">p, f</span>) =&gt;</span> p.then(f), <span class="built_in">Promise</span>.resolve(arg));</span><br><span class="line"></span><br><span class="line"><span class="comment">// EXAMPLES</span></span><br><span class="line"><span class="keyword">const</span> sum = pipeAsyncFunctions(</span><br><span class="line">x =&gt; x + <span class="number">1</span>,</span><br><span class="line">x =&gt; <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =&gt;</span> setTimeout(<span class="function"><span class="params">()</span> =&gt;</span> resolve(x + <span class="number">2</span>), <span class="number">1000</span>)),</span><br><span class="line">x =&gt; x + <span class="number">3</span>,</span><br><span class="line"><span class="keyword">async</span> x =&gt; (<span class="keyword">await</span> x) + <span class="number">4</span></span><br><span class="line">);</span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">await</span> sum(<span class="number">5</span>)); <span class="comment">// 15 (after one second)</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<h4 id="分析"><a href="#分析" class="headerlink" title="分析"></a>分析</h4><p>根据下面示例显示，1秒后会输出15，试着将5代入 <code>sum函数</code> 的几个箭头函数中累加了一下，结果没错，也就是说<code>pipeAsyncFunctions</code> 函数能将传进去的几个箭头函数依次执行一遍。再看到 <code>reduce</code> 函数，可以确定 <code>p,f</code> 两个参数想必就是 <code>sum</code> 传入的几个函数。</p>
<p><code>reduce</code> 函数可以将数组中的每一项依次执行指定的回调函数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">arr.reduce(callback,[initValue])</span><br><span class="line"><span class="comment">// 回调函数有四个参数</span></span><br><span class="line">callback(preValue,currentValue,?index,?arr)</span><br></pre></td></tr></table></figure>

<h4 id="改写代码"><a href="#改写代码" class="headerlink" title="改写代码"></a>改写代码</h4><p>为了更好理解这段代码，我在 VS Code 中将这段代码改成了更适合理解的写法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">const pipeAsyncFunctions =</span></span><br><span class="line"><span class="comment">(...fns) =&gt; arg =&gt; fns.reduce((p, f) =&gt; p.then(f), Promise.resolve(arg));</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">const</span> pipeAsyncFunctions = <span class="function"><span class="keyword">function</span>(<span class="params">...fns</span>) </span>&#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"fns:"</span>, fns);</span><br><span class="line"><span class="comment">// fns: [ [Function], [Function], [Function], [Function] ]</span></span><br><span class="line"><span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">arg</span>) </span>&#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"arg:"</span>, arg);</span><br><span class="line"><span class="comment">// arg: 5</span></span><br><span class="line"><span class="keyword">return</span> fns.reduce(<span class="function"><span class="keyword">function</span>(<span class="params">p, f, index, arr</span>) </span>&#123;</span><br><span class="line"><span class="keyword">return</span> p.then(f);</span><br><span class="line">&#125;, <span class="built_in">Promise</span>.resolve(arg));</span><br><span class="line">&#125;;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> sum = pipeAsyncFunctions(</span><br><span class="line">x =&gt; x + <span class="number">1</span>,</span><br><span class="line">x =&gt; x + <span class="number">2</span>,</span><br><span class="line">x =&gt; x + <span class="number">3</span>,</span><br><span class="line">x =&gt; x + <span class="number">4</span></span><br><span class="line">);</span><br><span class="line">(<span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">await</span> sum(<span class="number">5</span>)); <span class="comment">// 15 (after one second)</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<p>这里的 <code>fns</code> 即为传入的四个函数通过 <code>三点运算符</code> 形成的数组，通过打印输出可以证实这一点，同时确定了 <code>arg,p,f</code> 的值。之所以 <code>fns</code> 不是 <code>sum(5)</code> 传入的5，是因为 <code>sum函数</code> 实际接收的是 <code>pipeAsyncFunctions</code> 返回的函数，即 <code>function(arg) {...}</code> 。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sum = pipeAsyncFunctions(</span><br><span class="line">x =&gt; x + <span class="number">1</span>,</span><br><span class="line">x =&gt; x + <span class="number">2</span>,</span><br><span class="line">x =&gt; x + <span class="number">3</span>,</span><br><span class="line">x =&gt; x + <span class="number">4</span></span><br><span class="line">);</span><br><span class="line"><span class="comment">// 等效于</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> temp = pipeAsyncFunctions(...fns) <span class="comment">//temp接受执行后的返回值</span></span><br><span class="line"><span class="keyword">const</span> sum = temp;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">const sum = function(arg) &#123;</span></span><br><span class="line"><span class="comment">return fns.reduce(function(p, f) &#123;</span></span><br><span class="line"><span class="comment">return p.then(f);</span></span><br><span class="line"><span class="comment">&#125;, Promise.resolve(arg));</span></span><br><span class="line"><span class="comment">&#125;;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<p>对于 <code>reduce</code> 函数的 <code>initValue</code> 值要写成 <code>Promise.resolve(arg)</code> ，个人认为是为了将 <code>arg</code> 变成 <code>Promise</code> 对象，从而在回调函数中使 <code>p</code> 使用 <code>then</code> 方法执行 <code>fns</code> 中的各函数得到结果。所以要在最后使用 ES7的 <code>async和await</code> 语法等待异步函数执行完成再输出最终结果。</p>
<h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p>这段代码初一看显得有些难以理解，但是只需要将其进行拆分，转换成 ES5 的写法就会变得很容易理解了，最值得关注的便是 <code>reduce</code> 和 <code>promise</code> 的使用技巧了。当然，这样难以理解的高(zhuang)级(bi)技巧，平时研究一下原理就好，团队合作的时候就不要写了。好麻烦啊</p>
 
    </div>
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/js/" rel="tag">js</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E7%90%86%E8%AE%BA/" rel="tag">理论</a></li></ul>
 
    </footer>
  </div>
   
<nav id="article-nav">
  
  <a href="/2020-02-10/Vue%E5%AE%9E%E7%8E%B0%E7%96%AB%E6%83%85%E5%9C%B0%E5%9B%BE/" id="article-nav-older" class="article-nav-link-wrap">
    <strong class="article-nav-caption">上一篇</strong>
    <div class="article-nav-title">Vue实现新冠病毒疫情地图</div>
  </a>
  
  
  <a href="/2020-03-23/%E5%8D%9A%E5%AE%A2%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97/" id="article-nav-newer" class="article-nav-link-wrap">
    <strong class="article-nav-caption">下一篇</strong>
    <div class="article-nav-title">
      
      博客更新日志
      
    </div>
  </a>
  
</nav>
 
</article>



          
          <div id="lv-container" class="commentModel" data-id="city" data-uid="MTAyMC80ODM2Ni8yNDg2MA=="></div>
          
        </section>
        
        <aside id="sidebar" class="hidden-xs wow bounceInRight">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">分类</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/%E4%BD%93%E9%AA%8C/">体验</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/%E5%89%8D%E7%AB%AF/">前端</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%97%A5%E5%BF%97/">日志</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%97%A5%E5%BF%97/%E7%AC%94%E8%AE%B0/">笔记</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%97%A5%E8%AE%B0/">日记</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%9E%8E%E6%90%9E/">瞎搞</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%9E%8E%E6%90%9E/%E7%AC%94%E8%AE%B0/">笔记</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AC%94%E8%AE%B0/%E7%9E%8E%E6%90%9E/">瞎搞</a></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9A%8F%E4%BE%BF%E5%86%99%E5%86%99/">随便写写</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Vue/" rel="tag">Vue</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/electron/" rel="tag">electron</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/excel/" rel="tag">excel</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/js/" rel="tag">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/" rel="tag">nodejs</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/python/" rel="tag">python</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spider/" rel="tag">spider</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wifi/" rel="tag">wifi</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E4%BA%8C%E6%AC%A1%E5%85%83/" rel="tag">二次元</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%8D%9A%E5%AE%A2%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7/" rel="tag">博客管理工具</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%AE%89%E5%8D%93%E8%BD%AF%E4%BB%B6/" rel="tag">安卓软件</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%95%99%E7%A8%8B/" rel="tag">教程</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%97%A5%E5%BF%97/" rel="tag">日志</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%97%A5%E8%AE%B0/" rel="tag">日记</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/" rel="tag">服务器</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%90%86%E8%AE%BA/" rel="tag">理论</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%96%AB%E6%83%85%E5%9C%B0%E5%9B%BE/" rel="tag">疫情地图</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%99%9A%E6%8B%9F%E6%9C%BA/" rel="tag">虚拟机</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6/" rel="tag">评论插件</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%A1%B9%E7%9B%AE/" rel="tag">项目</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">归档</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/09/">九月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/06/">六月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">四月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">三月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/02/">二月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/01/">一月 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">十一月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">十月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">九月 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">八月 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2020-09-08/SakuHx/">SakuHx</a>
          </li>
        
          <li>
            <a href="/2020-06-12/Flutter%E9%85%8D%E7%BD%AE%E4%B8%8EHelloWorld/">Flutter配置与HelloWorld</a>
          </li>
        
          <li>
            <a href="/2020-04-12/Termux%E5%88%9D%E4%BD%93%E9%AA%8C/">Termux初体验</a>
          </li>
        
          <li>
            <a href="/2020-03-29/%E9%9A%8F%E6%9C%BA%E5%9B%BE%E7%89%87/">要来一张图片嘛？</a>
          </li>
        
          <li>
            <a href="/2020-03-23/%E4%B8%AA%E4%BA%BAblog%E6%90%AD%E5%BB%BA/">个人blog搭建</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 Sakura Sun<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
  <img src="/images/2233&sleep.png" style="position: fixed;bottom: 0;right: 0;width: 15%;">
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    
    

  
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <script type="text/javascript">
    // 等待DOM加载完成
    $(document).on("DOMContentLoaded" ,function () {
      $('body').addClass('loaded');
      $('#loader-wrapper .load_title').remove();
      setTimeout(() => {
        $('#loader-wrapper').remove();
      }, 2000)
    });

  </script>
  <div id="not-mobile">
    <div class="live2d hidden-xs hidden-sm">
      
<link rel="stylesheet" href="/js/live2d/waifu.css">

      
<script src="/js/live2d/live2d.js"></script>

      
<script src="/js/live2d/waifu-tips.js"></script>

      <!-- // live2d -->
      <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" class="live2d"></canvas>
        <div class="waifu-tool">
          <span class="fui-home"></span>
          <span class="fui-chat"></span>
          <span class="fui-eye"></span>
          <span class="fui-user"></span>
          <span class="fui-photo"></span>
          <span class="fui-info-circle"></span>
          <span class="fui-cross"></span>
        </div>
      </div>
      <script type="text/javascript">
        live2d_settings['modelId'] = 4;
        live2d_settings['modelTexturesId'] = 87;
        initModel("/js/live2d/waifu-tips.json")
      </script>
      </div>
      <div class="player hidden-xs hidden-sm">
      <!-- //网易云播放器 -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" defer></script>
      <div id="aplayer" class="aplayer" data-id="2127198653" data-server="netease" data-type="playlist"
        data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
      <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js" defer></script>
      </div>
  </div>
</div>
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

  
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>

  
<script src="/js/style.js"></script>


  <!-- 来必力City版安装代码 -->
  <script type="text/javascript">
    (function (d, s) {
      var j, e = d.getElementsByTagName(s)[0];
      if (typeof LivereTower === 'function') {
        return;
      }
      j = d.createElement(s);
      j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
      j.async = true;
      e.parentNode.insertBefore(j, e);
    })(document, 'script');
  </script>
  <!-- City版安装代码已完成 -->
</body>

</html>